<template>
    <div class="home">
        <h2>代办事项</h2>
        <Add @add-item="addItem" />
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue'
    import Add from './components/Add.vue'

    let items = reactive([])
    let newItem = ref('')

    function addItem(newItem) {
        items.push({
          id : new Date().getTime(),
          text: newItem,
          itemClass: "work",
          over: false
        });
        newItem.value = '';
      }
</script>

<style scoped>
  .home {
    width: 700px;
    margin: 0 auto;
    padding: 20px 50px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px #ccc;
  }
  h2 {
    margin: 20px;
    font-size: 38px;
  }
</style>
